<template>
  <div class="lineChart">
    <div class="chartTitle">总销售量</div>
    <div class="time-type">
      <span @click="select('day')" class="block" :class="{'positive':positiveType==='day'}">日</span>
      <span @click="select('week')" class="block" :class="{'positive':positiveType==='week'}">周</span>
      <span @click="select('month')" class="block" :class="{'positive':positiveType==='month'}">月</span>
    </div>
    <chart class="chart" :impChartData="impData" :setChartData="setData"></chart>
  </div>
</template>

<script>
  import chart from "../test/chart";

  export default {
    name: "demo03",
    data() {
      return {
        chartData: {
          day: {
            xData: ["06/11", "06/12", "06/13", "06/14", "06/15", "06/16", "06/17"],
            yData: [34, 38, 30, 28, 45, 49, 37]
          },
          week: {
            xData: ["31周", "32周", "33周", "34周", "35周", "36周", "37周"],
            yData: [210, 247, 279, 258, 186, 171, 230]
          },
          month: {
            xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            yData: [876, 802, 878, 861, 759, 871, 832]
          }
        },
        positiveType: "day",
        impData: {
          xData: ["06/11", "06/12", "06/13", "06/14", "06/15", "06/16", "06/17"],
          yData: [34, 38, 30, 28, 45, 49, 37]
        },
        setData: {
          xAxisColor: '#B03A5B',
          lineColor: '#60C0DD',
          grid: {
            y: 45,
            x: 60,
            x2: 40,
            y2: 90
          }
        },
      }
    },
    methods: {
      select(type) {
        this.positiveType = type;
        this.impData = this.chartData[type];
      }
    },
    components: {
      chart
    }
  }
</script>

<style lang="scss" scoped>
  .lineChart {
    .chartTitle {
      border-left: 3px solid #B03A5B;
      padding: 0 12px;
      height: 28px;
      line-height: 28px;
      font-size: 14px;
      color: #07111b;
      background: #f3f5f7;
    }
    .time-type {
      padding: 18px 18px 0 18px;
      font-size: 0;
      .block {
        display: inline-block;
        padding: 8px 12px;
        margin-right: 8px;
        line-height: 16px;
        border-radius: 1px;
        font-size: 12px;
        color: rgb(77, 85, 93);
        background: rgba(243, 245, 247, 0.9);
        &.positive {
          background: rgba(176, 58, 91, 0.2)
        }
      }
    }
    .chart {
      width: 100%
    }
  }
</style>
